<template>
    <div class="app-container">
        <el-card class="tip">
            <h3 class="title">{{ form.examName}}</h3>
            <p class="desc">用时：{{ form.doTime}}</p>
            <p class="desc">得分：{{ form.totalScore}}</p>
            <p>
                试卷状态：
                <el-tag type="success" v-if="form.iscorrected" class="status-tag" >已批改</el-tag>
                <el-tag type="warning" v-if="!form.iscorrected" class="status-tag" >待批改</el-tag>
            </p>
            <el-divider></el-divider>
            <div>
                <span v-for="item,index in form.answers" :key="index" >
                    <el-tag type="success" @click="goAnchor('#question-'+(index))" class="exam-tag" v-if="item.correctError == true">{{ index+1}}</el-tag>
                    <el-tag type="danger" @click="goAnchor('#question-'+(index))" class="exam-tag" v-else-if="item.correctError == false">{{ index+1}}</el-tag>
                    <el-tag type="warning" @click="goAnchor('#question-'+(index))" class="exam-tag" v-else>{{ index+1}}</el-tag>
                </span>
            </div>
            <el-divider></el-divider>
            <p>
                <el-button type="text" @click="goBack" class="btn">返回上一级</el-button>
            </p>
        </el-card>
        <div class="question" v-for="item,index in form.answers" :key="item.id" :id="'question-'+index">
            <QuestionView :answerItem="item" :index="(index+1)+'、'"></QuestionView>
            <el-divider></el-divider>
        </div>
    </div>
</template>

<script>
import QuestionView from '@/views/exam/questionView'
import { examViewList } from '@/api/records/records';
export default {
    name:'ExamView',
    components:{
        QuestionView,
    },
    data(){
        return{
            form:{
                // 试卷的id
                examId:0,
                examName:'',
                doTime:0,
                totalScore: 0,
                examTotal:0,
                // 是否批改
                iscorrected:null,
                answers:[]
            },
        }
    },
    mounted(){
        let examId = this.$route.query.id;
        examViewList(examId).then(resp =>{
            this.form = resp.data;
        })
    },
    methods:{
        goAnchor(selector){
            this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
        },
        // 返回上一级
        goBack(){   
            this.$router.go(-1);
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .desc{
        font-size: 14px;
        margin-bottom: 5px;
    }
    .app-container{
        padding: 30px 20px;
    }
    .tip{
        width: 20%;
        height: 100%;
        position: fixed;
        
    }
    .btn{
        padding-top: 15px;
        color: rgb(193, 187, 187);
    }
    .question{
        width: 75%;
        margin-left: 22%;
        border: none;
    }
    .title{
        font-family: '楷体';
        margin-bottom: 15px;
    }
    .status-tag{
        height: 30px;
        width: 50px;
        margin: 5px 0px 5px 5px;
        line-height: 25px;
    }
    .exam-tag{
        height: 30px;
        width: 30px;
        margin: 5px 0px 5px 5px;
        line-height: 25px;
    }
    .exam-tag:hover{
        cursor: pointer;
    }
</style>